import React, { Component } from 'react'
import { Text, View, Image, TouchableHighlight, StyleSheet, ScrollView, StatusBar } from 'react-native'
import axios from 'axios'
const dataUrl = "http://120.53.227.202:8080/music/api/music/"
export default class Like extends Component {

    state = {
        musics: []
    }

    componentDidMount() {
        //获取整个⾳乐列表
        fetch(dataUrl+'/isLike').then(resp => resp.json())
            .then(data => this.setState({ musics:data.obj }))

            // axios.get(dataUrl).then(response=>{
            //     console.log(response.data)
            // })
    }

    //测试touchablehighlight
    _test = (item) => {
        this.props.navigation.navigate('Music', item)
    }

    render() {
        return (

            <View style={{ flex: 1 , flexDirection:'column-reverse'}}>
                {/* 透明状态栏 */}
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView
                    stickyHeaderIndices={[1]}
                >
                    <View style={{ height: 340 }}>
                        <Image style={{ height: '100%', width: '100%' }} source={require('../sources/Like/music_img/music_cover.jpg')} ></Image>
                    </View>

                    <View style={{ flex: 1, height: 60, backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#707070', borderBottomColor:'#E4E7ED',borderBottomWidth:0.5}} >
                        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }} >
                            <View style={{ flex: 0.1, alignItems: 'center' }} >
                                <Image style={{ height: 20, width: 20 }} source={require('../sources/Like/music_img/music_play1.png')} />
                            </View>
                            <View style={{ flex: 0.7 }} >
                                <Text style={{ fontSize: 20, fontWeight: '700' }} >喜欢列表</Text>
                            </View>
                            <View style={{ flex: 0.1 }} >
                                <Image style={{ height: 20, width: 20 }} source={require('../sources/Like/music_img/music_download.png')} />
                            </View>
                            <View style={{ flex: 0.1 }} >
                                <Image style={{ height: 19, width: 19 }} source={require('../sources/Like/music_img/music_morechoice.png')} />
                            </View>
                        </View>
                    </View>
                    <ScrollView style={{minHeight:350}}>
                        {this.state.musics.map((item, index) => {
                            return <View key={index} style={{ flexDirection: 'row', backgroundColor: '#ffffff' }} >
                                <TouchableHighlight style={{ flex: 1 }}
                                    underlayColor='#DDDDDD'
                                    onPress={()=>this._test(item)}>

                                    <View style={{ flex: 1, height: 58, flexDirection: 'row', alignItems: 'center' }} >
                                        <View style={{ flex: 0.15 }}>
                                            <Text style={{ textAlign: 'center', fontSize: 16, color: '#707070' }} >{item.id}</Text>
                                        </View>
                                        {/* 歌曲图片显示 */}
                                        {/* <View style={{ flex: 0.1 }} >
                                            <Image style={{ borderRadius: 30, height: 45, width: 45 }} source={{ uri: item.img }} />
                                        </View> */}
                                        <View style={{ flex: 0.63 }}>
                                            <View style={{ flex: 1, justifyContent: 'center' }} >
                                                <View>
                                                    <Text style={{ fontSize: 16, width: 150, flexWrap: 'wrap' }} numberOfLines={1} >{item.name}</Text>
                                                </View>
                                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                    <Image style={{ height: 12, width: 12 }} source={require('../sources/Like/music_img/music_sq.png')} />
                                                    <Text style={{ color: '#707070', fontSize: 12, width: 150, marginLeft: 3, flexWrap: 'wrap' }} numberOfLines={1} >{item.singer}</Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={{ flex: 0.17 }} >
                                            <TouchableHighlight style={{ flex: 1, justifyContent: 'space-around', alignItems: 'center' }}
                                                underlayColor="#DDDDDD"
                                                onPress={()=>this._test(item)}>
                                                <Image style={{ height: 23, width: 23 }} source={require('../sources/Like/music_img/music_mvplay.png')} />
                                            </TouchableHighlight>
                                        </View>
                                        <View style={{ flex: 0.1 }} >
                                            <TouchableHighlight style={{ flex: 1, justifyContent: 'space-around' }}
                                                underlayColor="#DDDDDD"
                                                onPress={()=>this._test(item)} >
                                                <Image style={{ height: 20, width: 20 }} source={require('../sources/Like/music_img/music_singmore.png')} />
                                            </TouchableHighlight>
                                        </View>
                                    </View>
                                </TouchableHighlight>
                            </View>
                        })}


                    </ScrollView>
                </ScrollView>

                <View style={{height:60,backgroundColor:'#C3473A'}}>
                </View>






            </View>

        )
    }
}

